<template>
  <el-dialog v-model="dialogOpen" title="选择场地" width="500px" append-to-body :close-on-click-modal="false">
    <el-form label-width="100px">
      <el-form-item label="选择场地">
        <el-select
          v-model="selectedIds"
          style="width: 100%"
          class="mb20"
          multiple
          filterable
          placeholder="选择场地"
        >
          <el-option
            v-for="item in siteList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { toRefs } from '@vueuse/shared'
import { getSiteList } from '../../../../../../api/ven'

const emit = defineEmits(['submitForm'])
const { proxy } = getCurrentInstance()

const data = reactive({
  dialogOpen: false,
  siteList: [],
  selectedIds: []
})
const { dialogOpen, siteList, selectedIds } = toRefs(data)

function submitForm() {
  if (selectedIds.value.length === 0) {
    proxy.$modal.msgWarning('请选择场地')
    return
  }

  proxy.$modal.confirm('确定提交吗？')
    .then(() => {
      emit('submitForm', selectedIds.value)
    })
}

function open() {
  dialogOpen.value = true

  if (siteList.value.length === 0) {
    getSiteList().then((res) => {
      siteList.value = res.rows
    })
  }
}

function close() {
  dialogOpen.value = false
}

defineExpose({
  open,
  close
})

</script>

<style scoped>

</style>
